.ui5-dynamic-page-title-header-wrapper {
    position: sticky;
    top: 0;
     /* We need the z-index to be higher than in the header actions, to avoid overlapping by snap on scroll */
    z-index: 3;
}

:host {
    display: block;
    height: 100%;
    background-color: var(--ui5_dynamic_page_background);
    isolation: isolate;
}

.ui5-dynamic-page-root {
    container-type: inline-size;
    height: inherit;
    overflow-y: hidden;
}

.ui5-dynamic-page-scroll-container {
    overflow-y: auto;
    height: 100%;
}

/* Automatically fit content that has height: 100% */
.ui5-dynamic-page-scroll-container {
    display: flex;
    flex-direction: column;
}

.ui5-dynamic-page-content {
   flex-grow: 1;
   position: relative;
}

.ui5-dynamic-page-fit-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Footer  */
.ui5-dynamic-page-footer {
    position: sticky;
    bottom: 0;
    padding: 0 0.5rem 0.5rem 0.5rem;
    box-sizing: border-box;
    z-index: 2;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out;
}

.ui5-dynamic-page-spacer {
    height: var(--_ui5_dynamic_page_footer_spacer);
}

:host([show-footer]) .ui5-dynamic-page-fit-content {
    bottom: var(--_ui5_dynamic_page_footer_spacer);
}

:host([show-footer]) .ui5-dynamic-page-footer {
    transform: translateY(0);
    opacity: 1;
}

::slotted([slot="footerArea"]) {
    /* TODO css vars? */
    border-radius: 0.25rem;
    background-color: var(--_ui5_dynamic_page_header_background_color);
    box-sizing: content-box;
    width: auto;
}


::slotted([slot="titleArea"]) {
    width: auto;
}

/* Responsive paddings */

/* S Size */
@container (max-width: 599px) {
    .ui5-dynamic-page-fit-content {
        padding: var(--_ui5_dynamic_page_content_padding_S);
    }
    ::slotted([slot="titleArea"]) {
        padding: var(--_ui5_dynamic_page_title_padding_S);
    }
    ::slotted([slot="headerArea"]) {
        padding: var(--_ui5_dynamic_page_header_padding_S);
    }
}

/* M Size */
@container (min-width: 600px) and (max-width: 1023px) {
    .ui5-dynamic-page-fit-content {
        padding: var(--_ui5_dynamic_page_content_padding_M);
    }
    ::slotted([slot="titleArea"]) {
        padding: var(--_ui5_dynamic_page_title_padding_M);
    }
    ::slotted([slot="headerArea"]) {
        padding: var(--_ui5_dynamic_page_header_padding_M);
    }
}

/* L Size */
@container (min-width: 1024px) and (max-width: 1439px) {
    .ui5-dynamic-page-fit-content {
        padding: var(--_ui5_dynamic_page_content_padding_L);
    }
    ::slotted([slot="titleArea"]) {
        padding: var(--_ui5_dynamic_page_title_padding_L);
    }
    ::slotted([slot="headerArea"]) {
        padding: var(--_ui5_dynamic_page_header_padding_L);
    }
}

/* XL Size */
@container (min-width: 1440px) {
    .ui5-dynamic-page-fit-content {
        padding: var(--_ui5_dynamic_page_content_padding_XL);
    }
    ::slotted([slot="titleArea"]) {
        padding: var(--_ui5_dynamic_page_title_padding_XL);
    }
    ::slotted([slot="headerArea"]) {
        padding: var(--_ui5_dynamic_page_header_padding_XL);
    }
}